<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"></script>
</head>

<body>
<form class="form-horizontal">
    <div class="form-group" style="padding-top: 10px">
        <label for="inputTitle" class="col-sm-2 control-label">商品标题</label>
        <div class="col-sm-10">
            <input type="text" style="width: 80%" class="form-control" id="inputTitle" placeholder="请输入商品标题">
        </div>
    </div>
    <div class="form-group">
        <label for="inputPrice" class="col-sm-2 control-label">商品价格</label>
        <div class="col-sm-10">
            <input type="text" style="width: 80%" class="form-control" id="inputPrice" placeholder="请输入商品价格">
        </div>
    </div>
    <div class="form-group">
        <label for="inputDescr" class="col-sm-2 control-label">商品描述</label>
        <div class="col-sm-10">
            <textarea cols="90" rows="10" id="inputDescr"></textarea>
        </div>
    </div>
    <div class="form-group">
        <label for="file" class="col-sm-2 control-label">商品图片</label>
        <div class="col-sm-10">
            <input type="file" style="width: 60%" class="form-control" id="file" onchange="uploadImg()">
            <!-- 商品上传完毕后要即时显示上传效果 -->
            <img src="" id="myimg" style="width: 100px;">
        </div>
    </div>
</form>
<div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
        <button type="button" class="btn btn-primary" onclick="addGoods()">保存</button>
    </div>
</div>
</body>
</html>
<script>
    function addGoods () {
        // 获取商品信息
        // 获取商品标题
        let title = document.getElementById('inputTitle').value
        let inputPrice = document.getElementById('inputPrice').value
        let inputDescr = document.getElementById('inputDescr').value
        let inputImg = document.getElementById('myimg').src

        // 发送请求
        $.ajax({
            url: 'addGoods',
            type: 'POST',
            data: {
                'title': title,
                'price': inputPrice,
                'descr': inputDescr,
                'img': inputImg,
                'mid': 1
            },
            success: function (res) {
                alert('添加成功' + res)
            }
        })
    }

    function uploadImg () {
        const client = new OSS({
            // yourRegion填写Bucket所在地域。以华东1（杭州）为例，yourRegion填写为oss-cn-hangzhou。
            region: "oss-cn-chengdu",
            authorizationV4: true,
            // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
            accessKeyId: "LTAI5tKzn43aQ3zSpRFMpfL1",
            accessKeySecret: "56lBQoaGVqBsas0eqnFsoA9o1XKzWj",
            // 从STS服务获取的安全令牌（SecurityToken）。
            // stsToken: "yourSecurityToken",
            // 填写Bucket名称。
            bucket: "leiou",
        });

        const data = file.files[0];
        putObject(data);

        async function putObject(data) {
            try {
                // 填写Object完整路径。Object完整路径中不能包含Bucket名称。
                // 您可以通过自定义文件名（例如exampleobject.txt）或文件完整路径（例如exampledir/exampleobject.txt）的形式实现将数据上传到当前Bucket或Bucket中的指定目录。
                // data对象可以自定义为file对象、Blob数据或者OSS Buffer。
                const options = {
                    meta: { temp: "demo" },
                    mime: "json",
                    headers: { "Content-Type": "text/plain" },
                };
                let img_data = document.getElementById("file").value
                const result = await client.put(img_data, data, options);
                console.log(result);
                document.getElementById("myimg").src = result.url
            } catch (e) {
                console.log(e);
            }
        }
    }
</script>